<!-- 编辑弹窗 -->
<template>
  <el-dialog
    width="600px"
    title="关联登录账户"
    :visible="visible"
    :lock-scroll="false"
    v-dialog-movable="false"
    custom-class="ele-dialog-form"
    @update:visible="updateVisible"
    :close-on-click-modal="false">
    <div class="account-title">创建新账户</div>
    <el-form ref="form" :model="form" :rules="rules" label-width="60px" :size="defaultFormSize">
      <el-row>
        <el-col :span="12">
          <el-form-item label="账号:" prop="UserName">
            <el-input clearable v-model="form.UserName" placeholder="请输入账号"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="昵称:" prop="NickName">
            <el-input clearable v-model="form.NickName" placeholder="请输入昵称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码:" prop="UserPassword">
            <el-input
              type="password"
              clearable
              autocomplete="new-password"
              show-password
              v-model="form.UserPassword"
              placeholder="请输入密码"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色:" prop="RoleID">
            <el-select v-model="form.RoleID" style="width: 100%" multiple placeholder="请选择角色">
              <el-option v-for="item in role" :key="item.RoleID" :label="item.RoleName" :value="item.RoleID"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="account-button">
      <el-button type="primary" class="fr" :loading="loading" @click="relationNewUser">保存</el-button>
    </div>
    <div class="account-title">关联已有账户</div>
    <div class="user-table">
      <ele-pro-table
        ref="table"
        method="get"
        v-if="visible"
        :toolbar="null"
        row-key="UserID"
        :datasource="url"
        :columns="columns"
        :request="defaultTableRequest"
        :response="defaultTableResponse"
        :size="defaultTableSize">
        <template slot="action" slot-scope="{row}">
          <el-popconfirm class="ele-action" title="确定将当前员工绑定到当前账户吗？" @confirm="relationTableUser(row)">
            <el-link slot="reference" icon="el-icon-edit" type="primary" :underline="false">
              绑定
            </el-link>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </div>
    <div style="height: 20px"></div>
  </el-dialog>
</template>

<script>
  import rules from '@/config/rules/user/save-user'
  import columns from '@/config/columns/department/login-account'

  export default {
    name: 'login-account',
    props: {
      // 弹窗是否打开
      visible: {
        type: Boolean,
        default: false
      },
      // 修改回显的数据
      staffId: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        // 数据请求地址
        url: '/staff/get-relation-user',
        // 数据列定义
        columns,
        // 表单数据
        form: this.initFormData(this.data),
        // 表单验证规则
        rules,
        // 提交状态
        loading: false,
        // 角色
        role: []
      };
    },
    watch: {
      data() {
        this.form = this.initFormData(this.data);
      }
    },
    mounted() {
      this.loadRole()
    },
    methods: {
      // 加载角色
      loadRole() {
        if (this.role.length > 0) {
          return
        }
        this.$http.get('/role/map', {params: {IsPage: 'no'}}).then(res => {
          if (res.data.code === 200) {
            res.data.result.forEach(item => {
              this.role.push({
                RoleID: item.RoleID,
                RoleName: item.RoleName
              })
            })
          }
        })
      },
      // 员工绑定登录账户（关联已有账户）
      relationTableUser(row) {
        let params = {
          StaffID: this.staffId,
          UserID: row.UserID
        }
        this.$http.post('/staff/relation-table-user', params).then(res => {
          if (res.data.code === 200) {
            this.$message({type: 'success', message: res.data.msg});
            this.$emit('done');
            this.updateVisible(false);
          }
        })
      },
      // 员工绑定登录账户（创建新用户）
      relationNewUser() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.loading = true;
            this.form.StaffID = this.staffId
            this.$http.post('/staff/relation-new-user', this.form).then(res => {
              this.loading = false;
              if (res.data.code === 200) {
                this.$message({type: 'success', message: res.data.msg});
                this.$emit('done');
                this.updateVisible(false);
                this.form = this.initFormData({});
              }
            }).catch(() => {
              this.loading = false;
            });
          } else {
            return false;
          }
        });
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
      /* 初始化form数据 */
      initFormData(data) {
        return Object.assign({
          RoleID: '',
          NickName: '',
          UserName: '',
          UserPassword: '',
        }, data);
      },
    }
  }
</script>

<style scoped>
  .account-title {
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
  }

  .account-button {
    overflow: hidden;
  }
</style>
